<template>
    <div class="caih-register">
        <div class="caih-register-title">
            {{ props.title }}
            <span>{{ props.subTitle }}</span>
        </div>
        <div class="caih-register-content">
            <img :src="IconSuccess" alt="" />
            <h3>恭喜您！账号注册成功</h3>
            <p v-if="props.autoRedirect">{{ state.left }}s后自动跳转至{{ props.text }}</p>
            <el-button class="btn-register" type="primary" @click="handleRedirect">立即跳转</el-button>
        </div>
    </div>
</template>

<script setup>
import { onMounted, reactive } from "vue";
import { useRouter } from "vue-router";

import IconSuccess from "@/assets/icons/success.png";

const router = useRouter();

const props = defineProps({
    title: { type: String, default: "注册" },
    subTitle: { type: String, default: "REGISTER" },
    autoRedirect: { type: Boolean, default: true },
    link: { type: String, default: "/" },
    delay: { type: [String, Number], default: 60 },
    text: { type: String, default: "网站首页" },
});
const state = reactive({ left: 0, timer: null });

const handleRedirect = () => router.push(props.link);

const count = () => {
    state.left--;
    if (state.left >= 0) {
        state.timer = setTimeout(count, 1000);
    } else {
        clearTimeout(state.timer);
        handleRedirect();
    }
};

onMounted(() => {
    if (props.autoRedirect) {
        state.left = props.delay;
        count();
    }
});
</script>

<style lang="scss" scoped>
.caih-register {
    width: 416px;
    padding: 48px 43px;
    background: #fff;
    box-sizing: border-box;
    .caih-register-title {
        display: flex;
        align-items: center;
        height: 26px;
        font-size: 20px;
        font-weight: 700;
        color: rgba(0, 0, 0, 0.85);
        margin-bottom: 32px;
        span {
            margin-left: 8px;
            color: rgba(0, 0, 0, 0.25);
        }
    }
    .caih-register-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        img {
            margin-bottom: 24px;
        }
        h3 {
            line-height: 30px;
            font-size: 20px;
            text-align: center;
            color: rgba($color: #000000, $alpha: 0.85);
        }
        p {
            line-height: 22px;
            font-size: 14px;
            color: rgba(0, 0, 0, 0.65);
            text-align: center;
            margin-top: 12px;
        }
        .btn-register {
            width: 100%;
            margin-top: 110px;
        }
    }
}
</style>
